<div class="swiper-slide w-full">
  <div id="<%= dom_id(post) %>">
    <%= link_to spree.post_path(post), class: 'block hover:opacity-70 transition-opacity', data: { turbo_frame: '_top' } do %>
      <div class="h-[200px] w-full bg-gray-100">
        <% if post.image.attached? && post.image.variable? %>
          <%= spree_image_tag(
            post.image,
            width: 400,
            height: 200,
            class: "h-full w-full object-cover object-center",
            loading: :lazy,
            alt: post.title,
          ) %>
        <% end %>
      </div>

      <h1 class="uppercase text-lg font-medium mt-4"><%= post.title %></h1>
      <div class="mt-2 text-sm"><%= local_time(post.published_at, "%B %e, %Y") %></div>
      <div class="mt-4"><%= post.shortened_description %></div>
    <% end %>
  </div>
</div>
